<!DOCTYPE html>
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
<%@ include file="../core/core.jsp"%>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>添加客服</title>
    <meta name="keywords" content="叮当猫">
    <meta name="description" content="叮当猫">
    <link href="../static/css/summernote.css" rel="stylesheet">
    <link href="../static/css/summernote-bs3.css" rel="stylesheet">
    <link href="../static/css/cropper.min.css" rel="stylesheet">
    <link href="../static/css/sitelogo.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/artEditor.css">
    <link rel="stylesheet" href="../static/zyupload/skins/zyupload-1.0.0.min.css " type="text/css">
    <script type="text/javascript" src="../static/zyupload/zyupload.drag-1.0.0.min.js"></script>
    <script src="../static/js/photoClip/cropper.js"></script>
    <script src="../static/js/photoClip/sitelogo.js"></script>
    <style>
        #clipArea {
            margin: 20px;
            height: 300px;
        }
        #file,
        #clipBtn {
            margin: 20px;
        }
        #view {
            margin: 0 auto;
            width: 200px;
            height: 200px;
        }
        table.dataTable thead .sorting:after{
            content:'';
        }
        .note-editor{
            background: #f5f5f5;
        }
        .modal-dialog{
            width: 891px;
        }
    </style>
</head>

<body>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox-content">
        <form class="form-horizontal m-t" id="commentForm">

            <div class="form-group">
                <label class="col-sm-1 control-label">微信号：</label>
                <div class="col-sm-8">
                    <input id="goodsName" type="text" class="form-control" name="email" placeholder="微信号">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label">微信二维码名片：</label>
                <div class="col-sm-8">
                    <div id="mainImageAll">
                        <img id="mainImg" src="../static/img/uploadImg.png" alt="img" style="width: 66px;height: 66px;">

                    </div>
                    <button id="update" type="button" class="btn btn-primary"  data-toggle="modal" data-target="#avatar-modal" style="margin-bottom: 0px;">
                        上传微信二维码名片
                    </button>
                    <div class="user_pic" style="margin: 10px;">
                        <img src=""/>
                    </div>
                    <span  style="color: #252525;margin-top: 10px;">微信二维码名片（大小为750*750）。</span>
                </div>
            </div>


            <div class="form-group" id="agreeBox">
                <div class="col-sm-4 col-sm-offset-1">
                    <div class="btn btn-primary" id="apply">保存</div>
                </div>
            </div>
        </form>
    </div>
</div>


<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width: 690px;height: 705px">
            <!--<form class="avatar-form" action="upload-logo.php" enctype="multipart/form-data" method="post">-->

                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                </div>
                <div class="modal-body">


                 <div id="zyupload" class="zyupload"></div>

                 <script type="text/javascript">
                     var mainImageUrlAll ='';
                 $(function(){
                     // 初始化插件
                     $("#zyupload").zyUpload({
                         width            :   "650px",                 // 宽度
                         height           :   "400px",                 // 宽度
                         itemWidth        :   "140px",                 // 文件项的宽度
                         itemHeight       :   "115px",                 // 文件项的高度
                         url              :   "/crm/uploadImage.do",  // 上传文件的路径
                         fileType         :   ["jpg","png","js","exe"],// 上传文件的类型
                         fileSize         :   51200000,                // 上传文件的大小
                         multiple         :   true,                    // 是否可以多个文件上传
                         dragDrop         :   true,                    // 是否可以拖动上传文件
                         tailor           :   false,                    // 是否可以裁剪图片
                         del              :   true,                    // 是否可以删除文件
                         finishDel        :   false,  				  // 是否在上传文件完成后删除预览
                         /* 外部获得的回调接口 */
                         onSelect: function(selectFiles, allFiles){    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
                             console.info("当前选择了以下文件：");
                             console.info(selectFiles);
                         },
                         onDelete: function(file, files){              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
                             console.info("当前删除了此文件：");
                             console.info(file.name);
                         },
                         onSuccess: function(file, response){// 文件上传成功的回调方法

                               var args = response.split("|");
                             mainImageUrlAll=args[1];
                             $('#mainImageAll').empty();
                             //铺出来上传成功后的图片
                             $('#mainImageAll').append(
                                     '<img  src="'+args[1]+'" alt="img" style="width: 66px;height: 66px;">'
                             );
                         $('#mainImg').remove();
                          $("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
                         },
                         onFailure: function(file, response){          // 文件上传失败的回调方法
                             console.info("此文件上传失败：");
                             console.info(file.name);
                         },
                         onComplete: function(response){           	  // 上传完成的回调方法

                             $("#uploadInf").append("<p>上传成功" + response + "</p>");
                         }
                     });

                 });

                 </script>
                </div>

        </div>
    </div>
</div>

<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>

<script src="../static/js/ajaxfileupload_v1.js"></script>
<script src="../static/js/photoClip/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>

<!-- SUMMERNOTE -->
<script src="../static/js/plugins/summernote.min.js"></script>
<script src="../static/js/plugins/summernote-zh-CN.js"></script>

<script>
    $(document).ready(function () {

        $('.summernote').summernote({
            lang: 'zh-CN'
        });

    });
    var edit = function () {
        $("#eg").addClass("no-padding");
        $('.click2edit').summernote({
            lang: 'zh-CN',
            focus: true
        });
    };
    var save = function () {
        $("#eg").removeClass("no-padding");
        var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
        $('.click2edit').destroy();
    };
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="../static/js/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="../static/js/ueditor/ueditor.all.min.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">

</script>
<script src="../static/js/keFu/add.js" charset="utf-8"></script>
</body>

</html>
